<template>
  <div id="topsearch-box">
    <el-card id="topsearch-card" class="box-card">
      <div slot="header" class="clearfix">
        <span>48小时阅读排行</span>
        <!-- <el-button style="float: right; padding: 3px 0" type="text"
          >更多</el-button
        > -->
      </div>
      <div
        v-for="(item, index) in ViewsRecommend.slice(0, 5)"
        :key="item.id"
        class="text item"
      >
        <el-link
          @click="
            getArticleKey(index, item.id);
            toArticleDetails();
          "
          target="_blank"
        >
          {{ index + 1 }}.{{ item.title }}
        </el-link>
      </div>
      <!-- <el-tree
        :data="data"
      ></el-tree> -->
    </el-card>
    <el-card id="topsearch-card" class="box-card">
      <div slot="header" class="clearfix">
        <span>10天编辑推荐</span>
        <el-button style="float: right; padding: 3px 0" type="text"
          >更多</el-button
        >
      </div>
      <div
        v-for="item in AdminRecommend.slice(0, 10)"
        :key="item.id"
        class="text item"
      >
        {{ item.title }}
      </div>
    </el-card>
    <el-card id="topsearch-card" class="box-card">
      <div slot="header" class="clearfix">
        <span>10天评论排行</span>
        <el-button style="float: right; padding: 3px 0" type="text"
          >更多</el-button
        >
      </div>
      <div
        v-for="(item, index) in CommentRecommend.slice(0, 5)"
        :key="item.id"
        class="text item"
      >
        <el-link
          @click="
            getArticleKey(index, item.id);
            toArticleDetails();
          "
          target="_blank"
        >
          {{ index + 1 }}.{{ item.title }}
        </el-link>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  props: {
    AdminRecommend: [],
    CommentRecommend: [],
    ViewsRecommend: [],
    CommentRecommendCount: { default: 0 },
    ViewsRecommendCount: { default: 0 },
  },
  methods: {
    getArticleKey(index, id) {
      this.getIndex = index;
      this.getArticleId = id;

      console.log(this.getIndex);
      console.log(this.getArticleId);
    },
    toArticleDetails() {
      this.$router.push({
        path: "/articledetails", //页面路径
        query: {
          getIndex: this.getIndex,
          getArticleId: this.getArticleId,
        }, // 参数传值
      });
    },
    
  },
  mounted(){
    console.log();
  },
  data() {
    return {
      // AdminRecommend: [],
      // CommentRecommend: [],
      // data: [
      //   {
      //     label: "更多",
      //     children: [
      //       {
      //         label: this.ViewsRecommend.title
      //       },
      //     ],
      //   },
      // ],
    };
  },
};
</script>

<style>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
  margin-left: 10px;
  text-align: left;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

#topsearch-card {
  min-width: 200px;
  min-height: 350px;
  width: 220px;
  margin: 15px;
  padding: 0;
  background-color: white;
}
</style>